<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ include file="static/imgHost.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>首页</title>
    
	<script src="<%=basePath%>js/fontSize.js"></script>
	<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>
    
    <link rel="stylesheet" href="<%=basePath%>css/style.css"/>
    <link rel="stylesheet" href="<%=basePath%>css/style2.css"/>
    
    <link rel="stylesheet" href="<%=basePath%>myfont/style.css"/>
    
    <script src="<%=basePath%>plugins/layer/layer.js"></script>
    <link rel="stylesheet" href="<%=basePath%>plugins/layer/skin/default/layer.css"/>
    
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F6eTaN7pws2E23tdZL5BHPQeRWBXyLbW"></script> -->
    
    <style>
    body{ background:#F5F5F6;}
    .industry_icon {
    	background: #40a43f none repeat scroll 0 0;
		border-radius: 50%;
		display: block;
		font-size: 1.8rem;
		height: 3.3rem;
		line-height: 3rem;
		margin: 0 0.8rem;
		text-align: center;
		width: 3.3rem;
    }
    </style>
    <script type="text/javascript">
    var root = "index";
    </script>
</head>

<body>
  <script src="<%=basePath%>js/swiper.min.js"></script>
  
  <!--头部1-->
  <c:import url="/static/top.jsp"></c:import>
  <!--/头部1-->
  
  <!--轮播图-->
  <div class="swiper-container stlbt">
      <div class="swiper-wrapper">
      	<c:forEach items="${adviertisements}" var="adviertisement">
      		<c:if test="${adviertisement.type == 1}">
      		 <div class="swiper-slide">
	            <a href="http://${adviertisement.link_add}" target="_black"><img src="<%=imgHost%>${adviertisement.image}"></a>
	          </div>
      		</c:if>
      	</c:forEach>
      </div>
      
      <div class="swiper-pagination slkert"></div>
  </div>
  
  <script>
  var swiper = new Swiper('.stlbt', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      observer:true,
      observeParents:true,
  });
  </script>
  <!--/轮播图-->
  
  <!--菜单1-->
	<section
		class="casley1 background4 padding-lr1 border-bottom1 border-color1">
		<ul class="margin-lr-1 overflow-hidden">
			<c:forEach items="${industrys}" var="industry">
			<li>
				<a href="<%=basePath%>shop?t=${industry.id}&name=${industry.name}">
					<figure>
						<span class="industry_icon" style="background:${industry.background_color}"><i class="${industry.icon}" style="color:${industry.font_color};"></i></span>
						<figcaption>${industry.name}</figcaption>
					</figure>
				</a>
			</li>
			</c:forEach>
			<li>
				<a href="#">
					<figure>
						<span class="industry_icon" style="background:#4ad7bf;"><i class="icon-cz" style="color:#ffffff;"></i></span>
						<figcaption>充值</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a id="scanQRCode">
					<figure>
						<span class="industry_icon" style="background:#4ad7bf;"><i class="icon-sq" style="color:#ffffff;"></i></span>
						<figcaption>收款</figcaption>
					</figure>
				</a>
				<script type="text/javascript">
					var urls = "${pageContext.request.contextPath}";
					var timestamp = "";// 时间戳
					var nonceStr = "";// 随机串
					var signature = "";// 签名
					$(function() {
						$.get(urls + "/wx/oauth/signture", {
							"urls" : location.href
						}, function(res) {
							$.each(res, function(i, v) {
								if ("timestamp" == i.trim()) {
									timestamp = v;
								}
								if ("nonceStr" == i.trim()) {
									nonceStr = v;
								}
								if ("signature" == i.trim()) {
									signature = v;
								}
							});
							wx.config({
								debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId : "wxc6dc67749e9e5ba8", // 必填，公众号的唯一标识
								timestamp : timestamp, // 必填，生成签名的时间戳
								nonceStr : nonceStr, // 必填，生成签名的随机串
								signature : signature,// 必填，签名，见附录1
								jsApiList : [ "scanQRCode" ]
							// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
							});
						});
				
						$("#scanQRCode").click(function() {
							wx.scanQRCode({
								scanType : [ "qrCode" ], // 可以指定扫二维码还是一维码，默认二者都有  
								desc : 'scanQRCode desc'
							});
						});
					});
				</script>
			</li>
			<li>
				<a href="<%=basePath%>member/u/pay_page">
					<figure>
						<span class="industry_icon" style="background:#4ad7bf;"><i class="icon-fq" style="color:#ffffff;"></i></span>
						<figcaption>付款</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a onClick="ad_hidden()">
					<figure>
						<span class="industry_icon" style="background:#4ad7bf;"><i class="icon-gn" style="color:#ffffff;"></i></span>
						<figcaption>感恩</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a href="<%=basePath%>industry">
					<figure>
						<span class="industry_icon" style="background:#4ad7bf;"><i class="icon-all" style="color:#ffffff;"></i></span>
						<figcaption>分类</figcaption>
					</figure>
				</a>
			</li>
		</ul>
	</section>
	<!--/菜单1-->
  
  <!--菜单2-->
  <article class="casley2 background4 margin-top2 border-top1 border-color1 overflow-hidden">
	<c:forEach items="${adviertisements}" var="adviertisement">
   		<c:if test="${adviertisement.type == 2}">
   		<section class="border-lb1 border-color1">
	      <a href="http://${adviertisement.link_add}" style="padding:0;" target="_black"><img src="<%=imgHost%>${adviertisement.image}"  style="max-width: 100%;"></a>
	    </section>
   		</c:if>
   	</c:forEach>
  </article>
  <!--/菜单2-->

  <!--菜单3-->
  <article class="zdy_aklw background4 padding-lr2">
    <h2 class="cjbt color4">推荐店铺</h2>
    <div class="swiper-container swiper-zdy_aklw">
        <div class="swiper-wrapper">
        	<c:forEach items="${recommend_shops}" var="shop">
			<div class="swiper-slide">
              <a href="<%=basePath%>shop/${shop.id}#1">
			  <img src="<%=imgHost%>${shop.pic}"  style="border-radius: 50%;">
			  </a>
            </div>
			</c:forEach>
        </div>
       
    </div>
  </article>
  
  <script>
  var swiper = new Swiper('.swiper-zdy_aklw', {
      slidesPerView: 4.2,
      paginationClickable: true,
      spaceBetween: 15,
      observer:true,
      observeParents:true,
      freeMode: true
  });
  </script>
  <!--/菜单3-->

	<!--菜单4-->
  <article class="caidls background4 yf-padding-bottom">
  	
    <!--TAB切换-->
    <div class="yiskwim">
      <!--寻宝卡-->
      <div>
        <!-- <h2 class="text-align-center">城市寻宝大作战每天8：00正式开战</h2> -->
        <section>
<!--           <a href="###">
            <b>寻宝卡</b>
            <img src="images/ksc/ksc23.png">
          </a> -->
           
           <c:forEach items="${condition_shops}" var="shop">
           <div class="yf-home-shop-min">
            <a href="<%=basePath%>shop/${shop.id}#1" class="shop-list padding-lr2">
              <img class="fl" src="<%=imgHost%>${shop.pic}">
              <div class="fl shop-list-text ">
              <div class="clearfix">
                <span class="fl">${shop.name}</span>
	                <!-- <i class="bao home-tag fl">包</i> -->
	                <i class="home-tag xun fl" style="background:#ff0000;">包</i>
	                <!-- <i class="home-tag gua fl">刮</i> -->
                </div>
                <div class="yf-xjipf-ipj clearfix pfen3">
                  <div class="yf-xjipf fl" style="height: 1.55rem; ">
                  	<div class="yf-xjipf-mrpf pfen3-fz" style="height: 1.55rem;"></div>
                  </div>
                  <i class="yf-pingj-total fl">${shop.commentNum}条评论</i>
                  <samp class="pfjwe pfen3-fs color8 display-none">
						<span>${shop.totalStar}</span>
					</samp>
                </div>
                
                <!-- yf-xjipf-mrpf <div class="zdklert pfen3 grzxsj-left float-left overflow-hidden">
					<div class="xjipf" style="height: 1.55rem;">
						<div class="xjipf-mrpf pfen3-fz" style="height: 1.55rem;"></div>
					</div>
					<div class="djkkwr hlcsoer color3">0评价</div>
					<samp class="pfjwe pfen3-fs color8 display-none">
						<span>0</span>分
					</samp>
				</div> -->
                
                <div class="yf-xjipf-city"><span>${shop.industryName}</span><span class="city-qy">${shop.areaName}</span></div>
              </div>
              <div class="shop-list-price fl">
                <p class="yf-shop-price">¥${shop.goods_amount}</p>
                <p class="yf-shop-jul">${shop.distance}</p>
              </div>
            </a>      
          </div>
           </c:forEach>
        </section>

      <!--/寻宝卡-->
      
      <!--刮刮卡-->
<!--       <div>
  <h2 class="text-align-center">刮一刮，单车变摩托！</h2>
  <section>
    <a href="###">
      <b>刮刮卡</b>
      <img src="images/ksc/ksc06.png">
    </a>
  </section>
</div> -->
      <!--/刮刮卡-->
    
    </div>
    <!--/TAB切换-->
    
  </article>
  <!--/菜单4-->

	<!--底部1-->
  <div class="footer-1-height"></div>  
  <c:import url="/static/scan.jsp"></c:import>
  <!--/底部1-->
<script src="<%=basePath%>js/style.js"></script>
<!--表单提交开始-->
<link rel="stylesheet" href="<%=basePath%>css/tan.css"/>
<script type="text/javascript">
function ad_hidden(){
	$("#phone").val("");
	document.getElementById('ge_b').style.display='block';
}
function ad_g(){
document.getElementById('ge_g').style.display='none';
}
function ad_b(){
document.getElementById('ge_b').style.display='none';
}
function ad_show(){
	var phone = $("#phone").val();
	if (null == phone || phone == "") {
		layer.msg('手机号码不能为空');
		$("#phone").focus();
		return;
	} else if(!(/^1[34578]\d{9}$/.test(phone))){
        layer.msg('手机号码有误，请重填');
		$("#phone").focus();
        return;
    }
	var index = layer.load(0, {shade: false});
	document.forms[0].target="rfFrame";
	document.getElementById('ge_b').style.display='none';
	
	var ctx = "${pageContext.request.contextPath}";
	$.ajax({
	    type : "post",
	    url : ctx+'/member/gratitude',
	    dataType:"json",
	  	data: {
	  		phone : $('#phone').val()
        },
	    success : function(msg) {
	    	layer.close(index);
			layer.msg(msg.msg);
	    	if (msg.code == -1) {
	    		window.location.href = ctx+"/again_login.jsp?page=/member/info";
	    	} else if (msg.code == 1) {
	    		document.getElementById('ge_g').style.display='block';
	    	}
	    }
	});
}
</script>
<!--感恩表单-->
<div id="ge_b"  style="display: none;">
   <div class="tan_wp" id="g_b">
	<div class="tan_k">
		<div class="tan_p">
		<input class="tan_i" id="phone" type="text" placeholder="请输入11位手机号码" value="">
		<input class="tan_b" type="submit" name="submit" onClick="ad_show()" value="感恩一下">
		</div>
	</div>
  </div>
  <div class="zhe" onClick="ad_b()"></div>
 </div>
  <!--感恩成功-->
  <div id="ge_g"  style="display: none;">
 <div class="tan_wp">
 <div class="tan_xin">
 <img src="<%=basePath%>images/xin.png" style="width: 320px;">
 </div>
 <div class="tan_kuang">
	<div class="tan_wen">
	<span>感恩成功了!</span>
	</div>
	<div class="tan_an">
		<a href="">开始寻宝啦!</a>
	</div>
 </div>
 </div>
  <div class="zhe" onClick="ad_g()"></div>
<iframe style="display: none" id="rfFrame" name="rfFrame" src="about:blank"></iframe> 
</div>
<!--表单提交结束-->
</body>
</html>